{% extends "./inc/base.html" %}
{% block style %}
<link href="/static/admin/js/nestable/nestable.css" rel="stylesheet" type="text/css" />
<link href="/static/admin/css/weixin.css" rel="stylesheet" type="text/css" />
{% endblock %}
{% block content %}
<section class="vbox">
    <section id="bjax-target">
        <section class="hbox stretch">
            <!-- side content -->
            {% include "./inc/mp_side.html" %}
            <!-- / side content -->
            <section>
                <section class="vbox">
                    <header class="header bg-light b-b">
                        <p>{{controller.meta_title}}</p>
                    </header>
                    <section class="scrollable wrapper">

                        <section class="panel panel-default">
                            <header class="panel-heading text-right bg-light">
                                <ul class="nav nav-tabs pull-left">
                                    <li class=""><a data-toggle="tab" href="#messages-2"><i class="fa fa-comments text-muted"></i>&nbsp;微信图文</a></li>
                                    <li class="active"><a data-toggle="tab" href="#dropdown1"><i class="fa fa-user text-muted"></i>&nbsp;高级图文</a></li>
                                </ul>
                                <span class="hidden-sm">left</span>
                            </header>
                            <div class="panel-body">
                                <div class="tab-content">
                                    <div id="messages-2" class="tab-pane fade active in">
                                        <div class="alert alert-warning alert-block">
                                            <button type="button" class="close" data-dismiss="alert">×</button>
                                            <h4><i class="fa fa-bell-alt"></i>提示!</h4>
                                            <p>该类型不可用于群发，请使用“微信图文”创建群发图文素材。</p>
                                        </div>
                                        <div class="app-mobile-con">
                                            <div class="app-header"></div>
                                            <div class="app-entry">
                                                <div class="app-entry-hader"><div class="app-black-head"><span>高级图文</span></div></div>
                                                <div class="app-entry-fileds">
                                                    <div class="app-sortul">
                                                        <div id="nestable1" class="dd">
                                                            <ol class="dd-list">
                                                                <li data-id="1" class="dd-item">
                                                                    <div class="dd-handle-nodrag">
                                                                        <div class="app-article app-not-moveable js-notmoveball">
                                                                            <div class="app-msg app-msg-first">
                                                                                <h4 class="app-msg-title" style="line-height:44px;height:44px;">标题</h4>
                                                                                <div class="app-msg-thumb-wrap">
                                                                                    <p class="app-img-pre-show-left">封面图片</p>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="app-hide-edit-sec" style="display:block;">
                                                                        <div class="app-es-arrow"></div>
                                                                        <div class="app-es-line">
                                                                            <div class="app-es-line-top">链接到</div>
                                                                            <div class="app-es-line-con app-url-con">
                                                                                <a class="app-es-selected-url">我是第一个来的</a>
                                                                                <a class="app-es-btn" data-toggle="ajaxModal" href="/admin/file/selecturl">设置链接到的页面地址</a>
                                                                            </div>
                                                                        </div>
                                                                        <div class="app-es-line">
                                                                            <div class="app-es-line-top">标题</div>
                                                                            <div class="app-es-line-con"><input class="form-control app-title-input" type="text" /></div>
                                                                            <div class="app-input-tips-con help-block error-message">标题最多64个字符,当前长度<span class="app-input-tips-word">100</span>个，超出<span class="app-input-tips-word">20</span>个</div>
                                                                        </div>
                                                                        <div class="app-es-line">
                                                                            <div class="app-es-line-top">封面<span class="text-muted"> (图片建议尺寸360x200像素) </span></div>
                                                                            <div class="app-es-line-con app-img-pre-show-right">
                                                                                <div class="">
                                                                                </div>
                                                                                <a class="app-es-btn" data-toggle="ajaxModal" href="/admin/file/selectpic" >添加图片</a>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                                <li data-id="2" class="dd-item" >
                                                                    <div class="dd-handle-nodrag">
                                                                        <div class="app-article">
                                                                            <div class="app-msg app-msg-others">
                                                                                <h4 class="app-msg-title">标题</h4>
                                                                                <div class="app-img-pre-show-small">
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="app-hide-edit-sec">
                                                                        <div class="app-es-arrow"></div>
                                                                        <div class="app-es-line-con app-url-con">
                                                                            <a class="app-es-selected-url">我是第一个来的</a>
                                                                            <a class="app-es-btn" data-toggle="ajaxModal" href="/admin/file/selecturl">设置链接到的页面地址</a>
                                                                        </div>
                                                                        <div class="app-es-line">
                                                                            <div class="app-es-line-top">标题</div>
                                                                            <div class="app-es-line-con"><input class="form-control app-title-input" type="text" /></div>
                                                                            <div class="app-input-tips-con help-block error-message">标题最多64个字符,当前长度<span class="app-input-tips-word">100</span>个，超出<span class="app-input-tips-word">20</span>个</div>
                                                                        </div>
                                                                        <div class="app-es-line">
                                                                            <div class="app-es-line-top">封面<span class="text-muted"> (图片建议尺寸360x200像素) </span></div>
                                                                            <div class="app-es-line-con app-img-pre-show-right">
                                                                                <div class="img-pre-show">
                                                                                </div>
                                                                                <a class="app-es-btn" data-toggle="ajaxModal"  href="/admin/file/selectpic">添加图片</a>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                            </ol>
                                                        </div>
                                                        <div class="app-actions" id="app-btns">
                                                            <span class="app-action app-del hide" id="app-del-btn">删除</span>
                                                            <span  class="app-action app-edit">编辑</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="app-add-btn" id="add-item-li">
                                                <h4><span>新增+</span></h4>
                                                <!-- hide dom for js add begin -->
                                                <div class="hide" id="hide-item">
                                                    <li data-id="3" class="dd-item">
                                                        <div class="dd-handle">
                                                            <div class="app-article">
                                                                <div class="app-msg app-msg-others">
                                                                    <h4 class="app-msg-title">标题</h4>
                                                                    <div class="app-img-pre-show-small">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="app-hide-edit-sec">
                                                            <div class="app-es-arrow"></div>
                                                            <div class="app-es-line-con app-url-con">
                                                                <a class="app-es-selected-url">我是第一个来的</a>
                                                                <a class="app-es-btn" data-toggle="ajaxModal" href="/admin/file/selecturl">设置链接到的页面地址</a>
                                                            </div>
                                                            <div class="app-es-line">
                                                                <div class="app-es-line-top">标题</div>
                                                                <div class="app-es-line-con"><input class="form-control app-title-input" type="text" /></div>
                                                                <div class="app-input-tips-con help-block error-message">标题最多64个字符,当前长度<span class="app-input-tips-word">100</span>个，超出<span class="app-input-tips-word">20</span>个</div>
                                                            </div>
                                                            <div class="app-es-line">
                                                                <div class="app-es-line-top">封面<span class="text-muted"> (图片建议尺寸360x200像素) </span></div>
                                                                <div class="app-es-line-con app-img-pre-show-right">
                                                                    <div class="img-pre-show">
                                                                    </div>
                                                                    <a class="app-es-btn" data-toggle="ajaxModal"  href="/admin/file/selectpic">添加图片</a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </li>
                                                </div>
                                            </div>
                                            <!-- hide dom for js add end -->
                                        </div>
                                    </div>
                                    <div id="dropdown1" class="tab-pane fade">dropdown1</div>
                                    <div class="form-horizontal" style="margin-top:20px;">
                                        <div class="form-group">
                                            <div class="col-sm-4">
                                                <button class="btn btn-primary btn-s-md ajax-post" type="submit" target-form="form-horizontal">确定</button>
                                                <button class="btn btn-default" onclick="javascript:history.back(-1);return false;" type="submit">返回</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>

                    </section>
                </section>
            </section>
        </section>
    </section>

</section>
{% endblock %}

 {% block script %}
 <script src="/static/admin/js/parsley/parsley.min.js"></script>
<script src="/static/admin/js/parsley/parsley.extend.js"></script>
<script src="/static/admin/js/nestable/jquery.nestable.js"></script>
<script>

    $(document).ready(function()
    {
        //test
        //$("a[data-toggle=ajaxModal]:first").trigger("click");

        // activate Nestable for list 1
        $('#nestable1').nestable({
            maxDepth:1
        });

        $(".dd-list").on("mouseover", function(e){
            var e = e || window.event;
            var target = e.target || e.srcElement;
            var item = "";
            if(target.tagName == "li")
            {
                item = target;
            }
            else
            {
                item = $(target).closest("li");
            }
            var itemId = $(item).attr("data-id");
            btnsPosHandle(itemId);
        }).on("mouseout", function(e){

        });

        $("#add-item-li").on("click", function(){
            //内容最多10个
            if($("#nestable1").find("ol").children().length >= 10)
            {
                toastr.warning('最多添加十条数据');
                return;
            }
            maxDataId++;
            overBtnPos = maxDataId;
            $("#hide-item").find("li").attr("data-id", maxDataId);
            var item = $("#hide-item").html();
            $("#nestable1").find("ol").append(item);
            $(".app-actions").find(".app-edit").trigger("click");
        });

        $(".app-actions").find(".app-edit").on("click", function(){
            btnPos = overBtnPos;
            var item = $("#nestable1").find("li[data-id="+btnPos+"]");
            item.siblings().find(".app-hide-edit-sec").css({"display":"none"});
            item.find(".app-hide-edit-sec").css({"display":"block"});
        });

        $(".app-actions").find(".app-del").on("click", function(){
            swal({
                title: "确定删除?",
                text: "删除后不可恢复，请谨慎操作",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "确认",
                cancelButtonText: "取消",
                closeOnConfirm: true
            },
            function(){
                var item = $("#nestable1").find("li[data-id="+overBtnPos+"]");
                $(item.prev()).trigger("mouseover");
                if(btnPos == item.attr("data-id"))
                {
                    $(".app-actions").find(".app-edit").trigger("click");
                }
                item.remove();
            });
        });

        var btnsPosHandle = function(itemId){
            if(!itemId){return;}
            overBtnPos = itemId;
            var item = $("#nestable1").find("li[data-id="+itemId+"]");
            var itemIndex = $(item).index() + 1;
            var newPos = 0;
            if(parseInt(itemId) == 1)
            {
                newPos = 148;
            }
            else
            {
                newPos = 148 + (itemIndex - 1)*61;
            }
            if($.inArray(itemId, new Array("1", "2")) != -1)
            {
                $("#app-btns > .app-del").addClass("hide");
            }
            else
            {
                $("#app-btns > .app-del").removeClass("hide");
            }
            $("#app-btns").css({"top":newPos+"px", "display":"block"});
        }

        $("#nestable1").on("keyup", function(e){
            var e = e || window.event;
            var target = e.target || e.srcElement;
            if($(target).hasClass("app-title-input"))
            {
                var item = $("#nestable1").find("li[data-id="+btnPos+"]");
                var text = $(target).val();
                var tipsdiv = $(item).find(".app-hide-edit-sec .app-input-tips-con");
                if(text.length > 64){
                    tipsdiv.css({"display":"block"});
                    tipsdiv.find("span:first").text(text.length);
                    tipsdiv.find("span:last").text(text.length - 64);
                }
                else
                {
                    tipsdiv.css({"display":"none"});
                }
                $(item).find("h4.app-msg-title").text(text);
            }
        });

    });

    /*面板初始化数据*/
    var btnPos = 1; //按钮默认初始化在第一个位置
    var overBtnPos = 1; //按钮mouseover在哪个位置
    var maxDataId = 2;  //当前data-id最大值

    function picSelectCallback()
    {
        this.src = ""; //图片地址
        this.picid = ""; //图片数据库id
        this.urlid = ""; //链接ID
        this.urlpath = ""; //链接url
        this.urltitle = ""; //链接title
        this.handlePic = function(){
            if(this.src && this.picid)
            {
                var url = "/admin/file/getpic";
                var params = {"id":this.picid};
                $.post(url, params, function(data){
                    if(data.path)
                    {
                        var item = $("#nestable1").find("li[data-id="+btnPos+"]");
                        if(btnPos == 1)
                        {
                            $(item).find(".app-img-pre-show-left").css({"background-image":"url("+data.path+")"}).text("");
                        }
                        else
                        {
                            $(item).find(".app-img-pre-show-small").html('<img src="'+data.path+'" />');
                        }
                        $(item).find(".app-img-pre-show-right > div:first").html('<img style="width:100px;max-height:100px;" src="'+data.path+'" />');
                        $(item).find(".app-img-pre-show-right .app-es-btn").text("重新选择");
                    }
                }, "json");
            }
        }

        this.handleUrl = function(){
            //TODO 处理链接
            if(this.urlpath && this.urlid && this.urltitle)
            {
                var item = $("#nestable1").find("li[data-id="+btnPos+"]");
                $(item).find(".app-hide-edit-sec .app-url-con a:first").css({"display":"inline"}).text(this.urltitle).attr("href", this.urlpath).attr("urlid", this.urlid);
                $(item).find(".app-hide-edit-sec .app-url-con a:last").text("修改");
            }
        }
    }

</script>

{% endblock %}
